import { useContext } from 'react';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { useMediaPredicate } from 'react-media-hook';
import QRCode from 'react-qr-code';
import { useDispatch } from 'react-redux';
import Modal from 'src/component/Modal';
import { MediaQuery } from 'src/constant/Media';
import { ThemeContext } from 'src/context/ThemeContext';
import { openSnackbar } from 'src/redux/uiSlice';
import style from './InvitationModal.module.scss';

type Props = {
  open: boolean;
  handleClose: () => void;
  userId: string;
};

const InvitationModal = ({ open, handleClose, userId }: Props) => {
  const dispatch = useDispatch();
  const { IcCopy } = useContext(ThemeContext).image;
  const isBiggerThanXsm = useMediaPredicate(MediaQuery.Xsm);
  const url = `${window.location.origin}/#/auth/register?invitation=${userId}`;

  const onCopy = () => {
    dispatch(openSnackbar({ message: "复制成功" }));
  };

  return (
    <Modal open={open} handleClose={handleClose}>
      <div className={style.self}>
        <div className={style.head}>邀请码</div>
        <div>请将下方邀请码提供给受邀对象，于注册时填入“邀请码”栏位</div>
        <div className={style.code}>
          <div>{userId}</div>
          <CopyToClipboard onCopy={onCopy} text={userId}>
            <img src={IcCopy} className={style.clickable} />
          </CopyToClipboard>
        </div>
        <div>或直接提供下方专属注册链接</div>
        <div className={style.register}>
          <div className={style.qrcode}>
            <QRCode value={url} size={isBiggerThanXsm ? 120 : 96} />
          </div>
          <div className={style.url}>
            <div>{url}</div>
            <CopyToClipboard onCopy={onCopy} text={url}>
              <img src={IcCopy} className={style.clickable} />
            </CopyToClipboard>
          </div>
        </div>
      </div>
    </Modal>
  );
};

export default InvitationModal;
